<template>
  <div class="home" :style="{ height: `${winHeight}px` }">
    <div class="home-container-left">
      <div class="treeWrap">
        <basic-container>
          <avue-tree
            :option="treeOption"
            :data="treeData"
            @node-click="nodeClick"
          ></avue-tree>
        </basic-container>
      </div>
    </div>
    <div class="home-container-right">
      <basic-container>
        <avue-crud
          :option="option"
          :data="tableData"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @row-del="rowDel"
          :before-open="beforeOpen"
          @current-change="currentChange"
          @size-change="sizeChange"
          :page.sync="page"
          ref="crud"
        >
          <template slot="menuLeft">
            <el-button size="small" @click="gotoSql">SQL查询</el-button>
            <span style="font-size: 14px; margin-right: 10px"> 查询已删除</span>
            <el-switch
              v-model="searchDel"
              @change="changeDel"
              active-text="是"
              inactive-text="否"
            >
            </el-switch>
          </template>
        </avue-crud>
      </basic-container>
    </div>
    <ms-drawer :visible.sync="visible" :tab-list.sync="tabsList"></ms-drawer>
  </div>
</template>

<script>
import * as api from "@/api/physicalData/physicalData";

export default {
  name: "Home",
  data() {
    return {
      searchDel: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        height: "auto",
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: false,
        labelWidth: 120,
        // menuWidth: 200,
        dialogClickModal: false,
        tabs: true,
        addBtn: true,
        refreshBtn: false,
        columnBtn: false,
        viewBtn: true,
        editBtn: true,
        delBtn: true,
        align: "center",
        menuType: "menu",
        menuWidth: 100,
        column: [
          {
            label: "creator",
            prop: "creator",
          },
          {
            label: "oid",
            prop: "oid",
          },
        ],
      },
      treeOption: {
        addBtn: false,
        defaultExpandAll: true,
        props: {
          label: "nameDesc",
          value: "oid",
          children: "children",
        },
      },
      treeData: [],
      tableData: [],
      tableName: "",
      tabsList: [],
      visible: false,
    };
  },
  mounted() {
    this.getLeftTreeData();
  },
  methods: {
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.queryDataList();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.queryDataList();
    },
    changeDel(val) {
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
      this.queryDataList();
    },
    beforeOpen(done, type) {
      if (!this.tableName) {
        this.$message({
          type: "error",
          message: "请先选择表!",
        });
        return false;
      }
      done();
    },
    rowDel(form, index, done) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api
            .delDataByName({ id_: form.id_, type_name_: this.tableName })
            .then((res) => {
              done(form);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.queryDataList();
            });
        })
        .catch(() => {});
    },
    rowSave(form, done, loading) {
      if (!this.tableName) {
        this.$message({
          type: "error",
          message: "请先选择表!",
        });
        return;
      }
      api
        .insertDataByName({ ...form, type_name_: this.tableName })
        .then((res) => {
          loading();
          done(form);
          this.queryDataList();
        })
        .catch(() => {
          loading();
        });
    },
    rowUpdate(form, index, done, loading) {
      if (!this.tableName) {
        this.$message({
          type: "error",
          message: "请先选择表!",
        });
        return;
      }
      api
        .updateDataByName({ ...form, type_name_: this.tableName })
        .then((res) => {
          loading();
          done(form);
          this.queryDataList();
        })
        .catch(() => {
          loading();
        });
    },
    gotoSql() {
      this.$router.push("/physicalData/sqlSearch");
    },
    nodeClick(data) {
      if (data.name === "object") {
        return;
      }
      if(data.abstractFlag && data.abstractFlag === 1){
        return;
      }
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
      this.tableName = data.name;
      this.searchDel = false;
      this.queryDataList();
    },

    getTypeByType(type, key) {
      let cType = "input";
      if (type === "string" || type === "number" || type === "decimal") {
        cType = "input";
      } else if (type === "date") {
        cType = "datetime";
      } else {
        cType = type;
      }
      // id数字较大，会精度丢失
      if ( key && key.name === "id_") {
        cType = "input";
      }
      return cType;
    },

    initOption() {
      this.tableData = [];
      this.option = {
        ...this.option,
        column: [
          {
            label: "creator",
            prop: "creator",
          },
          {
            label: "oid",
            prop: "oid",
          },
        ],
      };
    },
    queryDataList() {
      const disabledArr = [];
      api
        .queryDataByName({
          name: this.tableName,
          isDeleted: this.searchDel ? "1" : "0",
          page: this.page.currentPage,
          pageSize: this.page.pageSize,
        })
        .then((res) => {
          if (res.data.success) {
            const newData = res.data.data.data.list;
            this.page.total = res.data.data.data.totalRows;
            const staticAttr = res.data.data.staticAttr;
            const dataType = res.data.data.dataType || {};
            const keyArr = Object.keys(dataType);
            this.tableData = [...newData];
            this.option = {
              ...this.option,
              column: keyArr.map((v) => {
                if (dataType[v].type === "number") {
                  return {
                    label: dataType[v].nameCn,
                    prop: v,
                    overHidden: true,
                    type: "input",
                    addDisplay: staticAttr.indexOf(v) < 0,
                    editDisplay: staticAttr.indexOf(v) < 0,
                    addDisabled: disabledArr.indexOf(v) > -1,
                    editDisabled: disabledArr.indexOf(v) > -1,
                    rules: [
                      {
                        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
                        message: "请输入整数",
                      },
                    ],
                  };
                }
                if (dataType[v].type === "decimal") {
                  return {
                    label: dataType[v].nameCn,
                    prop: v,
                    overHidden: true,
                    addDisplay: staticAttr.indexOf(v) <0,
                    editDisplay: staticAttr.indexOf(v) <0,
                    type: "input",
                    addDisabled: disabledArr.indexOf(v) > -1,
                    editDisabled: disabledArr.indexOf(v) > -1,
                    rules: [
                      {
                        pattern: /^-?[0-9]+(.[0-9]{1,})?$/,
                        message: "请输入数字",
                      },
                    ],
                  };
                }
                if (dataType[v].type === 'date') {
                  return {
                    label: dataType[v].nameCn,
                    prop: v,
                    overHidden: true,
                    addDisplay: staticAttr.indexOf(v) <0,
                    editDisplay: staticAttr.indexOf(v) <0,
                    type: this.getTypeByType(dataType[v].type),
                    addDisabled: disabledArr.indexOf(v) > -1,
                    editDisabled: disabledArr.indexOf(v) > -1,
                    format: "yyyy-MM-dd HH:mm:ss",
                    valueFormat: "yyyy-MM-dd HH:mm:ss",
                  };
                }

                return {
                  label: dataType[v].nameCn,
                  prop: v,
                  overHidden: true,
                  addDisplay: staticAttr.indexOf(v) <0,
                  editDisplay: staticAttr.indexOf(v) <0,
                  type: this.getTypeByType(dataType[v].type, v),
                  addDisabled: disabledArr.indexOf(v) > -1,
                  editDisabled: disabledArr.indexOf(v) > -1,
                };
              }),
            };
          } else {
            this.initOption();
          }
        });
    },
    getLeftTreeData() {
      api.getEntity().then((res) => {
        if (res.data.success) {
          this.treeData = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .avue-tree {
  height: 100%;
  overflow: hidden;
  .el-scrollbar__wrap{
    height: 95%;
  }
  .el-tree-node__children {
    overflow: initial; 
  }
}
::v-deep .el-table th.el-table__cell > .cell {
  white-space: nowrap;
}

.home {
  background-color: #f4f4f4;
  display: flex;

  // 左侧区域
  .home-container-left {
    width: 300px;
    .basic-container {
     height: calc( 100vh - 150px);
      overflow: hidden;
    }
    .el-tabs {
      user-select: none;
      & ::v-deep .el-tabs__item {
        font-size: 12px;
        padding: 0px 10px;
      }

      .tree-container {
        overflow-y: scroll;
        overflow-x: hidden;

        .tree-table {
          font-size: 12px;
          box-sizing: border-box;
          padding: 0px 10px;

          .tree-table-name {
            line-height: 30px;
            display: flex;
            align-items: center;
            cursor: pointer;

            .tree-fold-btn {
              font-size: 14px;
              color: #666;
              display: inline-block;
              height: 10px;
              padding: 0px 4px;
              margin-right: 5px;
              cursor: pointer;
            }
          }

          .tree-table-field {
            line-height: 30px;
            box-sizing: border-box;
            padding-left: 30px;
            color: #777;
            display: flex;
            align-items: center;

            .el-icon-document-copy {
              margin-left: 5px;
              cursor: pointer;

              &:hover {
                color: #409eff;
              }
            }
          }
        }
      }
      .tree-container::-webkit-scrollbar {
        width: 3px;
      }
      .tree-container::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.1);
      }

      // 命令集
      .order-list {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          font-size: 12px;
          margin: 10px 0px;
          box-sizing: border-box;
          padding: 5px 15px;
          cursor: pointer;
          display: flex;
          align-items: center;

          &:hover {
            background: #e8f2ff;
          }

          img {
            width: 22px;
            margin-right: 5px;
          }
        }
      }
    }
  }

  // 右侧区域
  .home-container-right {
    width: calc(100% - 300px);
    height: 100%;
  }
}
</style>
